<template>
  <div>
    <Oprate></Oprate>
    <div class="main-container">
      <div class="list-wrap">
        <div class="item-doctor" v-for="doctor in doctor">
          <input type="checkbox" class="check-it">
          <img class="photo" src="../../../../assets/img/photo.png">
          <div class="desc-wrap">
            <p class="name">
              <router-link to="/account/clusterXx">
                {{doctor.hospital}}
              </router-link>
            </p>
            <p class="desc">
              <span class="list-area">{{doctor.grade}}</span>
            </p>
          </div>
          <p class="tags-wrap">
            <span class="color-tag"  v-for="doctor in doctor.administrative" :class=doctor.class>{{doctor.department}}</span>
          </p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import Oprate from '../../../Oprate/Oprate3'

  export default {
    components: {
      Oprate
    },
    data() {
      return {
        doctor: [
          {hospital: '抗感染基层',grade: '上海 2018.01.03',administrative: [{class: 'green', department: '疾病认知水平高'},{class: 'green', department: '关注联合治疗相关前沿'}]},
          {hospital: '糖尿病基层',grade: '南京',administrative: [{class: 'yellow', department: '关注指南'},{class: 'green', department: '诊疗规范化执行度差'}]},
          {hospital: 'KOL Rising star 基层医生',grade: '北京',administrative: [{class: 'dark_green', department: '精神心理科'},{class: 'green', department: '精神心理科'}]},
          {hospital: '胃癌',grade: '广州',administrative: [{class: 'red', department: '精神科'},{class: 'green', department: '精神科'}]},
          {hospital: '抗感染基层',grade: '上海 2018.01.03',administrative: [{class: 'green', department: '疾病认知水平高'},{class: 'green', department: '关注联合治疗相关前沿'}]},
          {hospital: '糖尿病基层',grade: '南京',administrative: [{class: 'yellow', department: '关注指南'},{class: 'green', department: '诊疗规范化执行度差'}]},
          {hospital: 'KOL Rising star 基层医生',grade: '北京',administrative: [{class: 'dark_green', department: '精神心理科'},{class: 'green', department: '精神心理科'}]},
          {hospital: '胃癌',grade: '广州',administrative: [{class: 'red', department: '精神科'},{class: 'green', department: '精神科'}]},
        ]
      }
    }
  }
</script>

<style scoped>
  .main-container {
    margin-right: 50px;
    padding: 10px 15px 80px;
    background-color: rgba(245, 245, 248, 0.1);
    border-radius: 10px;
    -webkit-box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
    box-shadow: 10px 5px 30px 10px rgba(0, 0, 0, 0.2);
    background-image: url("../../../../assets/blur-bg-blurred.jpg");
    font-size: 14px;
  }

  /**/
  .item-doctor {
    padding: 10px 8px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .check-it {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 2px solid #fff;
    cursor: pointer;
  }

  .photo {
    margin: 0 26px 0 28px;
  }

  .desc-wrap {
    width: 218px;
    flex-shrink: 0;
    color: #fff;
  }

  .name {
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .name>a{
    color: #fff;
    text-decoration: none;
  }

  .color-tag {
    display: inline-block;
    min-width: 42px;
    height: 20px;
    line-height: 20px;
    padding-right: 3px;
    padding-left: 3px;
    border-radius: 4px;
    font-size: 14px;
  }

  .green {
    background-color: #7b9e02;
  }

  .yellow {
    background-color: #deb81b;
  }

  .dark_green {
    background-color: #1f9e91;
  }

  .red {
    background-color: #e85656;
  }

  .desc {
    font-size: 12px;
  }

  .tags-wrap {
    flex-shrink: 1;
    -webkit-box-flex: 0;
    flex-grow: 0;
    overflow: hidden;
    padding-left: 100px;
  }

  .tags-wrap > span {
    font-size: 12px;
    margin-right: 24px;
    display: inline-block;
    color: #fff;
  }
</style>
